<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"
	scope="session" />
<!DOCTYPE HTML>
<html>
<head>
	<title>Rooms</title>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link rel="stylesheet" href="css/lightbox.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<style type="text/css">
		.xx{
			color: white;
			font-size: 20px;
		}
		.zz{
			color: black;
			font-size: 20px;
		}
		.xxx{
			color: white;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="container">
			<div class="header-top">
				<nav class="navbar navbar-default">
					<div class="container-fluid">
    					<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<div class="navbar-brand">
								<h1><a href="user_index.html">Hotel</a></h1>
							</div>
						</div>
    					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li><a href="user_index.html">酒店<span class="sr-only">(current)</span></a></li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">房间 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li><a href="rooms.jsp">双人标间</a></li>
										<li><a href="rooms.jsp">豪华大床</a></li>
										<li><a href="rooms.jsp">情侣主题</a></li>
										<li><a href="rooms.jsp">商务标间</a></li>
										<li><a href="rooms.jsp">商务套间</a></li>
									</ul>
								</li>
								<li><a href="services.html">服务</a></li>
								<li class="active"><a href="about.jsp">个人中心</a></li>
								<li><a href="../index.jsp">退出</a></li>
							</ul>
						</div>
  					</div>
				</nav>
			</div>
			<div class="slider">
				<div class="callbacks_container">
				  	<div class="col-md-2"></div>
				<div class="col-md-8">
					<h1 class="xxx">个人信息修改</h1>
					<form>
						<input type="hidden" name="u_id" id="u_id" value="${user.u_id}">
						<div class="col-md-6 room-grids xx">用户名：</div>
						<div class="col-md-6 room-grids zz">
							<input type="text" value="${user.u_name}"
							 id="u_name" name="u_name">
							<div id="u_nameMsg">&nbsp;</div>
						</div>
						<div class="col-md-6 room-grids xx">密码：</div>
						<div class="col-md-6 room-grids zz">
							<input type="password" name="u_pass" id="u_pass">
							<div id="u_passMsg">&nbsp;</div>
						</div>
						<div class="col-md-6 room-grids xx">再次输入密码：</div>
						<div class="col-md-6 room-grids zz">
							<input type="password" name="u_repass">
							<div id="u_repassMsg">&nbsp;</div>
						</div>
						<div class="col-md-6 room-grids xx">手机号码：</div>
						<div class="col-md-6 room-grids zz">
							<input type="text" value="${user.u_phone}" 
							name="u_phone" id="u_phone">
							<div id="u_phoneMsg">&nbsp;</div>
						</div>
						<div class="col-md-6 room-grids" style="font-size: 20px">
							<input type="button" value="修改" onclick="update()">
						</div>
						<div class="col-md-6 room-grids" style="font-size: 20px">
							<input type="button" value="取消">
						</div>
					</form>
				</div>
				<div class="col-md-2"></div>	
				</div>
			</div>
		</div>
	</div>
	<div class="content">
		<div class="touch-section">
			<div class="container">
				<h3>联系我们&nbsp;get in touch</h3>
				<div class="touch-grids">
					<div class="col-md-4 touch-grid">
						<h4>地址</h4>
						<h5>银座</h5>
						<p>一米阳光广场</p>
						<p>怡海阁</p>
					</div>
					<div class="col-md-4 touch-grid">
						<h4>联系方式</h4>
						<h5>电话&Email</h5>
						<p>180 0603 6035</p>
						<p><a href="mailto:example@mail.com"> example@mail.com</a></p>
					</div>
					<div class="col-md-4 touch-grid">
						<h4>在线联系</h4>
						<h5>QQ&微信</h5>
						<p>9798336677</p>
						<p>180 0603 6035</p>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer-section">
		<div class="container">
			<div class="footer-top">
				<p></p>
			</div>
		</div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/localization/messages_zh.js" type="text/javascript" charset="utf-8"></script>
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
	$('form').validate({
		rules:{
			u_name:{
				required:true,
				rangelength:[2,10]
			},
			u_pass:{
				required:true,
				minlength:5
			},
			u_repass:{
				equalTo:"[name=u_pass]"
			},
			u_phone:{
				digits:true,
				rangelength:[11,11]
			}
		},
		messages:{
			u_name:{
				required:'姓名不能为空',
				rangelength:'姓名长度必须在2-10之间'
			},
			u_pass:{
				required:'密码不能为空',
				minlength:'密码必须是5位以上'
			},
			u_repass:{
				equalTo:'两次密码输入不一致'
			},
			u_phone:{
				rangelength:'请输入正确的手机号码'
			}
		},
		errorPlacement: function(error, element) {
 			name = element.attr('name');
			$('#'+name+'Msg').append(error);
			$('#'+name+'Msg').css({'color':'red','margin-bottom':'0'});
		}
	});
	function update(){
		if(confirm('是否修改')){
			$.ajax({
				url:'${ctx}/UserServlet/updUserById',
				type:'post',
				data:{"u_id":$("#u_id").val(),"u_name":$("#u_name").val(),"u_pass":$("#u_pass").val(),"u_phone":$("#u_phone").val()},
				success:function(data){
					var jj=JSON.parse(data);
					console.log(jj)
					if (jj['lll']=="true") {
						layer.msg('修改成功');
						time:5000;
						$(":text").val("");
						$(":password").val("");
					}else if (jj['lll']=="false") {
						layer.msg('该用户已被占用');
						time:5000;
						$(":text").val("");
						$(":password").val("");
					}else if (jj['lll']=="fail") {
						layer.msg('修改失败');
						$(":input").val("");
					}
				}
			});
		}
	}
</script>
</html>
